<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">出生日期</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-show d-flex a-center">
					<view class="show-text">年龄</view>
					<view class="show-text">{{age}}岁</view>
				</view>
				<view class="popup-row">
					<picker-view indicator-style="height: 70rpx;background: #F5F5F5;z-index: 0;" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="item" :style="`${value[0]==index?select:noSelect}`" v-for="(item,index) in years" :key="index">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" :style="`${value[1]==index?select:noSelect}`" v-for="(item,index) in months" :key="index">{{item}}月</view>
						</picker-view-column>
						<picker-view-column>
							<view class="item" :style="`${value[2]==index?select:noSelect}`" v-for="(item,index) in days" :key="index">{{item}}日</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button _style="font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";
import moment from 'moment'

const select ="font-size: 40rpx;color:#1DC691"
const noSelect ="font-size: 30rpx;color:#333333"

//设置最大日期位当前日期
const maxDateStr = ref(moment().subtract(18, 'years').format('YYYY-MM-DD'));
const years:any = ref([])
const months:any = ref([])
const days:any = ref([])
const maxDate = moment(maxDateStr.value,"YYYY-MM-DD")

for (let i = 1900; i <= maxDate.year(); i++) {
	years.value.push(i)
}
for (let i = 1; i <= 12; i++) {
	months.value.push(i)
}
for (let i = 1; i <= 31; i++) {
	days.value.push(i)
}

const popup = ref()
const showPopup = (initialDate:string) => {
	popup.value.open("bottom")
	if(initialDate==null)initialDate = moment().subtract(18, 'years').format("YYYY年MM月DD日")//默认当前
	//设置默认值
	const dateInitial = moment(initialDate,"YYYY年MM月DD日");
	let yearIndex = years.value.indexOf(dateInitial.year());
	let monthIndex = months.value.indexOf(dateInitial.month()+1);
	let dayIndex = days.value.indexOf(dateInitial.date());
	value.value = [yearIndex,monthIndex,dayIndex]
	//初始化年龄
	calculateAge();
	setMaxDate(value.value)
	
}
const closePopup = () => {
	popup.value.close()
}

const value = ref([years.value.length-1 , months.value.length-1 , days.value.length-1])
const bindChange = (e:any) => {
	const val = e.detail.value;

	setMaxDate(val);//更新最大日期

	//计算年龄
	calculateAge();
	
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetDate","onGetAge"])
const determine = () => {
	let dateString = years.value[value.value[0]] + "年" + months.value[value.value[1]] + "月" + days.value[value.value[2]] + "日"
	emit("onGetDate", dateString);
	emit("onGetAge", age.value);
	closePopup();//关闭
}

const age = ref(0)
//计算年龄
const calculateAge = () => { 
	let dateString = years.value[value.value[0]] + "年" + months.value[value.value[1]] + "月" + days.value[value.value[2]] + "日"
  // 将输入的日期字符串转换为Moment对象  
  const inputDate = moment(dateString,"YYYY年MM月DD日");  
  // 获取当前日期  
  const currentDate = moment();  
  // 计算年龄  
  age.value  = currentDate.diff(inputDate, 'years');  
  
}
//设置最大日期
const setMaxDate = (val:any) => {
	const maxDate = moment(maxDateStr.value,"YYYY-MM-DD")
	//加载月份
	months.value = []
	let maxMonth = 12;//常规是12个月
	//如果当当前选择的年等于最大年份，则设置最大月份
	if(years.value[val[0]] == maxDate.year()){
		maxMonth = maxDate.month() + 1;
	}
	for (let i = 1; i <= maxMonth; i++) {
		months.value.push(i)
	}
	//设置日
	let maxDays = moment({ year: years.value[val[0]], month: (months.value[val[1]] - 1) }).daysInMonth(); 
	days.value = []//清空月份
	if(years.value[val[0]] == maxDate.year() && months.value[val[1]] == (maxDate.month() + 1)){
		maxDays = maxDate.date()
	}
	for (let i = 1; i <= maxDays; i++) {
		days.value.push(i)
	}
	value.value = val
}
defineExpose({
  showPopup,
  closePopup
});
</script>
<style scoped>

.bottom-popup{
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	
}
.popup-title{
	height: 100rpx;
	border-bottom: 1rpx solid #E4E4E4;
}
.title-text{
	position:absolute;
	top:34rpx;
	left:50rpx;
	height: 32rpx;
	width: 234rpx;
}
.title-icon{
	position:absolute;
	top:32rpx;
	right: 30rpx;
	
	width: 36rpx;
	height: 36rpx;
}
.popup-show{
	justify-content: space-between;
	height: 80rpx;
	padding: 0 30rpx 0 30rpx;
}
.show-text{
	font-size: 32rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #333333;
}
.popup-row{
	padding-bottom: 16rpx;
}
.picker-view {
	height: 400rpx;
	margin-top: 20rpx;
}

.item {
	line-height: 70rpx;
	text-align: center;
	font-size: 30rpx;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: 500;
	
}
.popup-button{
	
}
.button-button{
	border-radius: 45rpx;
}
</style>